<template>
    <div>
                <van-nav-bar
                    title="不凡"
                    left-text="返回"
                    @click-left="onClickLeft"
                    />
                    <p class="myfv">我的收藏</p>
                    <div class="sublist">
                        
                            <div class="sublist-item" v-for="item in list" :key="item.id">
                                <router-link :to="`/goodsinfo?id=${item.id}`">
                                        <img :src="item.list_pic_url" alt="">
                                        <p>{{item.name}}</p>
                                        <p>{{item.retail_price}}</p>
                                </router-link>
                            </div>
                           
                           
                             <div class="sublist-item1">

                            </div>
                    </div>

    </div>
</template>

<script>
import {cartList} from "../../../api/cart/index.js"
    export default {
            data() {
                return {
                    list:[],
                }
            },
            methods: {
                onClickLeft(){
                    this.$router.go(-1)
                }
            },
            created(){
                var openId = localStorage.getItem("openId")
                cartList({
                    openId:openId
                }).then(res=>{
                   this.list = res.collectGoodsList
                })
            }
    }
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
}
    .myfv {
        display: block;
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        padding: 10px;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        background-color: #fff;
    }
    .sublist {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;;
        .sublist-item {
            width: 180px;
            height: 214px;
            background-color: #fff;
            margin-top: 5px;
            img {
                display: block;
                width: 151px;
                height: 151px;
                margin: 0 auto;
            }
            :nth-child(2 ){
                display: block;
                width: 100%;
                text-align: center;
                margin-top: 5px;
                color: #333;
            }
             :nth-child(3 ){
                display: block;
                width: 100%;
                text-align: center;
                margin-top: 5px;
                color:#9c3232;
            }
        }
        .sublist-item1 {
            width: 151px;
        }

    }
</style>